<template>
  <div class="capital-settings page">
    <van-nav-bar
        :title="userInfo.is_paypassword ? '修改资金密码' : '设置资金密码'"
        left-arrow
        @click-left="$router.back()"
    />
    <div class="wrapper">
      <div class="item" v-if="userInfo.is_paypassword">
        <p class="title">请输入旧密码</p>
        <van-password-input v-model="oldPass" :length="maxLength" gutter="10" :focused="showOld"
                            @click="showOld = true"/>
      </div>
      <div class="item"><p class="title">请输入新密码</p>
        <van-password-input v-model="newPass" :length="maxLength" gutter="10" :focused="showNew"
                            @click="showNew = true"/>
      </div>
      <div class="item"><p class="title">请输入确认密码</p>
        <van-password-input v-model="conPass" :length="maxLength" gutter="10" :focused="showCon"
                            @click="showCon = true"/>
      </div>
      <van-number-keyboard
          :show="showOld || showNew || showCon"
          @input="onInput"
          @delete="onDelete"
          @blur="showOld = false, showNew = false, showCon = false"
      />
      <van-button class="sub-btn " :class="allowSubmit ? 'active' : ''" :disabled="!allowSubmit" @click="submit">完成</van-button>
    </div>
  </div>
</template>
<script>
import {mapGetters} from "vuex";
import {Toast} from "vant";
import {updatePayPassword} from "@api/User";

export default {
  name: "Capital",
  computed: {
    allowSubmit: function () {
      if (this.userInfo.is_paypassword)
        return this.oldPass && this.newPass && this.conPass && (this.oldPass.length === 4 && this.newPass.length === 4 && this.conPass.length === 4 && this.newPass === this.conPass);
      else
        return this.newPass && this.conPass && (this.newPass.length === 4 && this.conPass.length === 4 && this.newPass === this.conPass);
    },
    ...mapGetters(["userInfo"]),
  },
  watch: {
    showOld: function (n) {
      if (n) {
        this.showNew = false;
        this.showCon = false;
      }
    },
    showNew: function (n) {
      if (n) {
        this.showOld = false;
        this.showCon = false;
      }
    },
    showCon: function (n) {
      if (n) {
        this.showNew = false;
        this.showOld = false;
      }
    }
  },
  data: function () {
    return {
      maxLength: 4,
      oldPass: "",
      newPass: "",
      conPass: "",
      showOld: false,
      showNew: false,
      showCon: false
    }
  },
  methods: {
    onInput: function (str) {
      if (this.showOld) {
        if (this.oldPass.length < this.maxLength) {
          this.oldPass += str;
        }
        if (this.oldPass.length >= this.maxLength) {
          this.showOld = false;
        }
      } else if (this.showNew) {
        if (this.newPass.length < this.maxLength) {
          this.newPass += str;
        }
        if (this.newPass.length >= this.maxLength) {
          this.showNew = false;
        }
      } else if (this.showCon) {
        if (this.conPass.length < this.maxLength) {
          this.conPass += str;
        }
        if (this.conPass.length >= this.maxLength) {
          this.showCon = false;
        }
      }
    },
    onDelete: function () {
      if (this.showOld) {
        if (this.oldPass.length > 0) {
          this.oldPass = this.oldPass.substring(0, this.oldPass.length - 1);
        }
        if (this.oldPass.length === 0) {
          this.showOld = false;
        }
      } else if (this.showNew) {
        if (this.newPass.length > 0) {
          this.newPass = this.newPass.substring(0, this.newPass.length - 1);
        }
        if (this.newPass.length === 0) {
          this.showNew = false;
        }
      } else if (this.showCon) {
        if (this.conPass.length > 0) {
          this.conPass = this.conPass.substring(0, this.conPass.length - 1);
        }
        if (this.conPass.length === 0) {
          this.showCon = false;
        }
      }
    },
    submit: function () {
      if (!this.allowSubmit) return;
      let that = this;
      Toast.loading({
        message: "资金密码修改中, 请稍等片刻",
        duration: 0,
        forbidClick: false,
        onOpened: function () {
          updatePayPassword(that.oldPass, that.newPass).then(() => {
            that.$store.dispatch("UpdateUserInfo");
            Toast.clear();
            Toast.success({
              message: "资金密码修改成功",
              duration: 2000
            })
            that.oldPass = "";
            that.newPass = "";
            that.conPass = "";
          }).catch(() => {
            Toast.clear();
          })
        }
      })
    }
  }
};
</script>
<style>
@keyframes breathing-2f0d2839 {
  0% {
    opacity: 1
  }

  50% {
    opacity: .3
  }

  to {
    opacity: 1
  }
}
</style>
<style scoped>
::v-deep .van-number-keyboard, ::v-deep .van-field__right-icon > i, ::v-deep .van-nav-bar__left > i, ::v-deep .van-nav-bar__text, ::v-deep .van-nav-bar__title, ::v-deep .van-cell__title {
  color: var(--van-nav-bar-icon-color);
}

::v-deep .van-password-input__item--focus {
  border: 0;
  -webkit-animation: breathing-2f0d2839 1s infinite;
  animation: breathing-2f0d2839 1s infinite;
}


::v-deep .van-password-input__security {
  height: 100%;
}

::v-deep .van-password-input .van-password-input__security .van-password-input__item {
  height: 100%;
  border: 0;
  text-align: center;
  border-radius: .26667rem;
}

::v-deep .van-password-input {
  width: 80%;
  height: 1.8rem;
  margin: 0 auto
}

.capital-settings {
  bottom: 0
}

.capital-settings .nav {
  background: linear-gradient(90deg, #fff, #fff)
}

.capital-settings .wrapper {
  height: calc(100% - 1.22667rem);
  overflow-y: auto;
  background-color: #f4ebf3;
  -webkit-overflow-scrolling: touch
}

.capital-settings .wrapper .item .title {
  margin: .53333rem 0;
  line-height: .53333rem;
  font-size: .37333rem;
  font-weight: 500;
  color: #fa59b5;
  text-align: center
}

.capital-settings .wrapper .sub-btn {
  margin: 1.33333rem 0 0 10%;
  width: 80%;
  border-radius: 1.06667rem;
  color: #fff;
  background: #cacaca;
  border: 0
}

.capital-settings .wrapper .sub-btn.active {
  color: #fff;
  background: linear-gradient(270deg, #fa59b5, #e38afb)
}

.speacial-btnColor .sub-btn.active {
  background: #e38afb !important
}
</style>
